import { notification } from 'ant-design-vue';
import { VueConstructor } from 'vue';

notification.config({
  placement: 'bottomRight'
});

interface IdType {
  [propName: number]: string
}

interface MessageType {
  install: (vue: VueConstructor) => void
}

interface OptionType {
  id?: number;
  text?: string;
  title?: string;
  duration?: number;
  key?: string
}

export interface MessageBoxType {
  error: (option: OptionType) => string;
  warn: (option: OptionType) => string;
  success: (option: OptionType) => string;
  close: (key: string) => void;
}

declare module 'vue/types/vue' {
  interface Vue {
    $messageBox: MessageBoxType
  }
}

const idType: IdType = {
  100: '对象类型不匹配',
  110: '超出系统允许范围',
  120: '超出模型约束范围',
  130: '不允许为空',
  140: '格式错误',
  150: '解析错误',
  4014: '拓展包依赖的元素,必须放置在包下'
};

const successType: IdType = {
  100: '发布成功',
  110: '导入成功',
  120: '导出成功',
};

const MESSAGE: MessageType = {
  install(Vue) {
    if (typeof window !== 'undefined' && window.Vue) {
      Vue = window.Vue;
    }

    //// 调用antd中的notification组件
    function open({ id, text, duration = 3, key = '' }: OptionType, type: string): string {
      const ele = document.querySelectorAll(
        '.ant-notification>span>.ant-notification-notice'
      );
      if (ele.length >= 6) {
        ele[0].remove();
      }

      let message = '';
      let iconText = '';
      switch (type) {
        case 'error':
          message = idType[id] || '错误提示';
          iconText = '×';
          break;
        case 'warn':
          message = idType[id] || '警告提示';
          iconText = '!';
          break;
        case 'success':
          message = successType[id] || '成功';
          iconText = '✓';
          break;
      }

      notification[type]({
        icon: h => {
          return h(
            'div',
            {
              class: `icon ${type}`
            },
            iconText
          );
        },
        description: h => {
          return h('div', {}, [
            h(
              'div',
              {
                class: 'content'
              },
              text
            ),
            id && h('div', { class: 'id' }, `事件ID:${id}`)
          ]);
        },
        message,
        key,
        duration,
      });
      return key;
    }

    Vue.prototype.$messageBox = {
      /**
       * 错误消息框
       * @param {Object} option
       * @param {number} option.id   100: '对象类型不匹配', 110: '超出系统允许范围', 120: '超出模型约束范围', 130: '不允许为空', 140: '格式错误', 150: '解析错误'
       * @param {string} option.text 消息框标题
       * @param {number} option.duration 延迟关闭时间，默认3s
       */
      error(option) {
        return open(option, 'error');
      },
      /**
       * 错误消息框
       * @param {Object} option
       * @param {number} option.id  可选 100: '对象类型不匹配', 110: '超出系统允许范围', 120: '超出模型约束范围', 130: '不允许为空', 140: '格式错误', 150: '解析错误'
       * @param {string} option.text 消息框标题
       * @param {string} option.title 可选 警告标题(默认值"警告提示")
       * @param {number} option.duration 延迟关闭时间，默认3s
       */
      warn(option) {
        return open(option, 'warn');
      },

      /**
       * 成功消息框
       * @param {Object} option
       * @param {number} option.id  可选 100: '发布成功',
       * @param {string} option.text 消息框标题
       * @param {string} option.title 可选 成功标题(默认值"成功")
       * @param {number} option.duration 延迟关闭时间，默认3s
       */
      success(option) {
        return open(option, 'success');
      },

      /**
       *
       * @param key 销毁窗口时使用
       */
      close(key: string) {
        if (key) {
          notification.close(key);
        }
      }
    };

  }
};
export default MESSAGE;
